<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="renderer" content="webkit">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
  <title>冷链在途监控</title>
  <link rel="stylesheet" href="styles/bootstrap/bootstrap.css">
  <link rel="stylesheet" href="styles/bootstrap-table.css">
  <link rel="stylesheet" href="lib/layui/css/layui.css">
  <link rel="stylesheet" href="styles/bootstrap-datetimepicker.min.css">
  <link rel="stylesheet" href="styles/awesome/font-awesome.min.css">
  <link rel="stylesheet" href="styles/reset.css">
  <link rel="stylesheet" href="styles/main.css">
  <link rel="stylesheet" href="styles/cy.css">
  <link rel="stylesheet" href="styles/qd.css">
  <link rel="stylesheet" href="styles/sfy_nav.css">
  <link rel="stylesheet" href="styles/style.css">
  <link rel="stylesheet" href="styles/newstyle.css">
</head>

<body>
  <!--头部-->
  <!-- 新菜单 2018-04-08 -->
  <div class="new-header">
    <div class="header-content">
      <div class="header-menu">
        <a href="index.html" class="logo">
          <img src="images/yly-logo.png" alt="">
        </a>
        <ul class="header-nav">
          <li>基础资料</li>
          <li>物流运营</li>
          <li>财务管理</li>
          <li>业务管理</li>
          <li>统计查询</li>
        </ul>
        <div class="header-select">
          <a>
            <!-- <label class="common-menu-btn"><input type="checkbox" checked="checked"><span></span></label><span>关闭常用菜单</span> -->
            <span class="common-menu-btn">常用菜单</span>
          </a>
          <a href="#" class="setting">设置</a>
          <ul class="header-select-list">
            <li>
              <i class="community"></i>
              <a href="#">传链社区</a>
            </li>
            <li>
              <i class="tel"></i>
              <a href="#">服务中心</a>
            </li>
            <li>
              <i class="message current"></i>
              <a href="#">消息中心</a>
            </li>
            <li>
              <i href="javascript:;" class="login"></i>
              <div class="userboxinfob">
                <div class="ul_userlist">
                  <p class="flexitem">张会员，欢迎您登录</p>
                  <ul class="flexitem">
                    <li>
                      <a href="/updatePwd">修改密码</a>
                    </li>
                    <li>
                      <a href="/logout">退出</a>
                    </li>
                  </ul>
                </div>
              </div>
            </li>
          </ul>
        </div>
      </div>

      <div class="header-menu-box">
        <div class="header-menu-content">
          <dl class="displayflex">
            <dt>组织资料 ></dt>
            <dd class="flex1">
              <a href="#">公司资料维护</a>
              <a href="#">公司部门资料维护</a>
              <a href="#">物流区域资料维护</a>
              <a href="#">物流中心资料维护</a>
              <a href="#">仓库资料</a>
              <a href="#">货主仓库指定</a>
              <a href="#">货主承运商指定</a>
            </dd>
          </dl>
          <dl class="displayflex">
            <dt>人员管理 ></dt>
            <dd class="flex1">
              <a href="#">公司人员角色维护</a>
              <a href="#">公司人员资料维护</a>
              <a href="#">货主人员资料维护</a>
              <a href="#">承运商人员资料维护</a>
              <a href="#">仓储商人员资料维护</a>
              <a href="#">商业客户人员资料维护</a>
            </dd>
          </dl>
          <dl class="displayflex">
            <dt>商品管理 ></dt>
            <dd class="flex1">
              <a href="#">新品发布清单</a>
              <a href="#">生产厂商资料维护</a>
              <a href="#">商品分类资料表</a>
              <a href="#">库管参数维护</a>
              <a href="#">补货层级维护</a>
              <a href="#">新增商品</a>
              <a href="#">商品资料维护</a>
              <a href="#" class="active">产品说明书维护</a>
              <a href="#">物价资料维护</a>
              <a href="#">耗材包关系维护</a>
              <a href="#">耗材包关系维护</a>
            </dd>
          </dl>
          <dl class="displayflex">
            <dt>产品证照 ></dt>
            <dd class="flex1">
              <a href="#">代理商证照维护</a>
              <a href="#">经销授权书证照维护</a>
              <a href="#">售后服务机构证照维护</a>
              <a href="#">医疗器械注册证维护</a>
              <a href="#">业务授权书维护</a>
            </dd>
          </dl>
          <dl class="displayflex">
            <dt>客户管理 ></dt>
            <dd class="flex1">
              <a href="#">商业单位资料维护</a>
              <a href="#">医疗机构资料维护</a>
            </dd>
          </dl>
        </div>
        <div class="header-menu-content">
          <dl class="displayflex">
            <dt>物流运营 ></dt>
            <dd class="flex1">
              <a href="#">公司资料维护</a>
              <a href="#">公司部门资料维护</a>
              <a href="#">物流区域资料维护</a>
              <a href="#">物流中心资料维护</a>
              <a href="#">仓库资料</a>
              <a href="#">货主仓库指定</a>
              <a href="#">货主承运商指定</a>
            </dd>
          </dl>
          <dl class="displayflex">
            <dt>人员管理 ></dt>
            <dd class="flex1">
              <a href="#">公司人员角色维护</a>
              <a href="#">公司人员资料维护</a>
              <a href="#">货主人员资料维护</a>
              <a href="#">承运商人员资料维护</a>
              <a href="#">仓储商人员资料维护</a>
              <a href="#">商业客户人员资料维护</a>
            </dd>
          </dl>
          <dl class="displayflex">
            <dt>商品管理 ></dt>
            <dd class="flex1">
              <a href="#">新品发布清单</a>
              <a href="#">生产厂商资料维护</a>
              <a href="#">商品分类资料表</a>
              <a href="#">库管参数维护</a>
              <a href="#">补货层级维护</a>
              <a href="#">新增商品</a>
              <a href="#">商品资料维护</a>
              <a href="#" class="active">产品说明书维护</a>
              <a href="#">物价资料维护</a>
              <a href="#">耗材包关系维护</a>
              <a href="#">耗材包关系维护</a>
            </dd>
          </dl>
          <dl class="displayflex">
            <dt>客户管理 ></dt>
            <dd class="flex1">
              <a href="#">商业单位资料维护</a>
              <a href="#">医疗机构资料维护</a>
            </dd>
          </dl>
          <dl class="displayflex">
            <dt>医院关系建立 ></dt>
            <dd class="flex1">
              <a href="#">采购目录勾对</a>
            </dd>
          </dl>
        </div>
        <div class="header-menu-content">
          <dl class="displayflex">
            <dt>财务管理 ></dt>
            <dd class="flex1">
              <a href="#">公司资料维护</a>
              <a href="#">公司部门资料维护</a>
              <a href="#">物流区域资料维护</a>
              <a href="#">物流中心资料维护</a>
              <a href="#">仓库资料</a>
              <a href="#">货主仓库指定</a>
              <a href="#">货主承运商指定</a>
            </dd>
          </dl>
          <dl class="displayflex">
            <dt>人员管理 ></dt>
            <dd class="flex1">
              <a href="#">公司人员角色维护</a>
              <a href="#">公司人员资料维护</a>
              <a href="#">货主人员资料维护</a>
              <a href="#">承运商人员资料维护</a>
              <a href="#">仓储商人员资料维护</a>
              <a href="#">商业客户人员资料维护</a>
            </dd>
          </dl>
          <dl class="displayflex">
            <dt>商品管理 ></dt>
            <dd class="flex1">
              <a href="#">新品发布清单</a>
              <a href="#">生产厂商资料维护</a>
              <a href="#">商品分类资料表</a>
              <a href="#">库管参数维护</a>
              <a href="#">补货层级维护</a>
              <a href="#">新增商品</a>
              <a href="#">商品资料维护</a>
              <a href="#" class="active">产品说明书维护</a>
              <a href="#">物价资料维护</a>
              <a href="#">耗材包关系维护</a>
            </dd>
          </dl>
          <dl class="displayflex">
            <dt>产品证照 ></dt>
            <dd class="flex1">
              <a href="#">代理商证照维护</a>
              <a href="#">经销授权书证照维护</a>
              <a href="#">售后服务机构证照维护</a>
              <a href="#">医疗器械注册证维护</a>
              <a href="#">业务授权书维护</a>
            </dd>
          </dl>
          <dl class="displayflex">
            <dt>客户管理 ></dt>
            <dd class="flex1">
              <a href="#">商业单位资料维护</a>
              <a href="#">医疗机构资料维护</a>
            </dd>
          </dl>
          <dl class="displayflex">
            <dt>医院关系建立 ></dt>
            <dd class="flex1">
              <a href="#">供应关系查询</a>
              <a href="#">采购目录勾对</a>
            </dd>
          </dl>
        </div>
        <div class="header-menu-content">
          <dl class="displayflex">
            <dt>业务管理 ></dt>
            <dd class="flex1">
              <a href="#">公司资料维护</a>
              <a href="#">公司部门资料维护</a>
              <a href="#">物流区域资料维护</a>
              <a href="#">物流中心资料维护</a>
              <a href="#">仓库资料</a>
              <a href="#">货主仓库指定</a>
              <a href="#">货主承运商指定</a>
            </dd>
          </dl>
          <dl class="displayflex">
            <dt>人员管理 ></dt>
            <dd class="flex1">
              <a href="#">公司人员角色维护</a>
              <a href="#">公司人员资料维护</a>
              <a href="#">货主人员资料维护</a>
              <a href="#">承运商人员资料维护</a>
              <a href="#">仓储商人员资料维护</a>
              <a href="#">商业客户人员资料维护</a>
            </dd>
          </dl>
          <dl class="displayflex">
            <dt>商品管理 ></dt>
            <dd class="flex1">
              <a href="#">新品发布清单</a>
              <a href="#">生产厂商资料维护</a>
              <a href="#">商品分类资料表</a>
              <a href="#">库管参数维护</a>
              <a href="#">补货层级维护</a>
              <a href="#">新增商品</a>
              <a href="#">商品资料维护</a>
              <a href="#" class="active">产品说明书维护</a>
              <a href="#">物价资料维护</a>
              <a href="#">耗材包关系维护</a>
              <a href="#">耗材包关系维护</a>
            </dd>
          </dl>
          <dl class="displayflex">
            <dt>产品证照 ></dt>
            <dd class="flex1">
              <a href="#">代理商证照维护</a>
              <a href="#">经销授权书证照维护</a>
              <a href="#">售后服务机构证照维护</a>
              <a href="#">医疗器械注册证维护</a>
              <a href="#">业务授权书维护</a>
            </dd>
          </dl>
          <dl class="displayflex">
            <dt>客户管理 ></dt>
            <dd class="flex1">
              <a href="#">商业单位资料维护</a>
              <a href="#">医疗机构资料维护</a>
            </dd>
          </dl>
          <dl class="displayflex">
            <dt>医院关系建立 ></dt>
            <dd class="flex1">
              <a href="#">供应关系查询</a>
              <a href="#">采购目录勾对</a>
            </dd>
          </dl>
        </div>
        <div class="header-menu-content">
          <dl class="displayflex">
            <dt>统计查询 ></dt>
            <dd class="flex1">
              <a href="#">公司资料维护</a>
              <a href="#">公司部门资料维护</a>
              <a href="#">物流区域资料维护</a>
              <a href="#">物流中心资料维护</a>
              <a href="#">仓库资料</a>
              <a href="#">货主仓库指定</a>
              <a href="#">货主承运商指定</a>
            </dd>
          </dl>
          <dl class="displayflex">
            <dt>人员管理 ></dt>
            <dd class="flex1">
              <a href="#">公司人员角色维护</a>
              <a href="#">公司人员资料维护</a>
              <a href="#">货主人员资料维护</a>
              <a href="#">承运商人员资料维护</a>
              <a href="#">仓储商人员资料维护</a>
              <a href="#">商业客户人员资料维护</a>
            </dd>
          </dl>
          <dl class="displayflex">
            <dt>商品管理 ></dt>
            <dd class="flex1">
              <a href="#">新品发布清单</a>
              <a href="#">生产厂商资料维护</a>
              <a href="#">商品分类资料表</a>
              <a href="#">库管参数维护</a>
              <a href="#">补货层级维护</a>
              <a href="#">新增商品</a>
              <a href="#">商品资料维护</a>
              <a href="#" class="active">产品说明书维护</a>
              <a href="#">物价资料维护</a>
              <a href="#">耗材包关系维护</a>
              <a href="#">耗材包关系维护</a>
            </dd>
          </dl>
          <dl class="displayflex">
            <dt>产品证照 ></dt>
            <dd class="flex1">
              <a href="#">代理商证照维护</a>
              <a href="#">经销授权书证照维护</a>
              <a href="#">售后服务机构证照维护</a>
              <a href="#">医疗器械注册证维护</a>
              <a href="#">业务授权书维护</a>
            </dd>
          </dl>
          <dl class="displayflex">
            <dt>客户管理 ></dt>
            <dd class="flex1">
              <a href="#">商业单位资料维护</a>
              <a href="#">医疗机构资料维护</a>
            </dd>
          </dl>
          <dl class="displayflex">
            <dt>医院关系建立 ></dt>
            <dd class="flex1">
              <a href="#">供应关系查询</a>
              <a href="#">采购目录勾对</a>
            </dd>
          </dl>
        </div>
      </div>
    </div>
  </div>
  <!-- 常用菜单 -->
  <div class="common-menu">
    <div class="common-menu-content">
      <p class="iconfont icon-menu">
        <a>公司资料维护</a>
        <a>新增商品</a>
        <a>采购目录勾对</a>
        <a>物流订单调度</a>
        <a>补货发起</a>
        <a>物流项目费用维护</a>
        <a>发票管理</a>
        <a>医院采购订单录入</a>
        <a>出库登录</a>
        <a>物流项目费用维护</a>
      </p>
    </div>
  </div>
  <!-- 按钮 当前位置-->
  <div class="g_header_nav">
    <div class="g_header_t">
      <div class="operate-btns"></div>
    </div>
    <div class="con_breadcrumb">
      <ol class="breadcrumb">
        <li>
          <a href="#">冷链在途监控</a>
        </li>
      </ol>
      <h3 class="current_module">冷链在途监控</h3>
    </div>
  </div>
  <!--end  按钮 当前位置-->
  <!--end头部-->
  <!--内容-->
  <div class="content clear">
    <div class="monitor-detail">
      <div>
        <div class="monitor-detail-title title-order">订单详情</div>
        <div class="monitor-order-detail">
          <ul>
            <li class="w-100 tac">订单号：<span>D047281941</span></li>
            <li class="w-33">商品名称：<span>某某某试剂</span></li>
            <li class="w-33">件数：<span>50</span>件</li>
            <li class="w-33"><i>商品详情</i></li>
            <li class="w-100">承运商：<span>武汉七曜物流服务有限公司</span></li>
            <li class="w-33">物流状态：<span>在途</span></li>
            <li class="w-33">目的地：<span>湖北襄阳</span></li>
            <li class="w-33">当前位置：<span>湖北武汉</span></li>
            <li class="abnormal w-33">冷链设备状态 <b>异常</b></li>
            <li class="normal w-33">数据上传 <b>正常</b></li>
            <li class="normal w-33">设备电量 <b>正常</b></li>
            <li class="abnormal w-50">当前温度：<span>9℃</span><b>异常</b></li>
          </ul>
        </div>
      </div>
      <div>
          <div class="monitor-detail-title title-temperature">温度记录</div>
          <div class="monitor-detail-echarts">
              <div class="echart1" id="echart1"></div>
              <div class="echart1 op" id="echart2"></div>
              <div class="echart1 op" id="echart3"></div>
              <div class="echart1 op" id="echart4"></div>
              <div class="echart1 op" id="echart5"></div>
              <div class="echart1 op" id="echart6"></div>
              <div class="echarts-tabs">
                <b>显示范围</b>
                <ul class="echarts-tab">
                  <li class="current">全过程</li>
                  <li>近12小时</li>
                  <li>24小时</li> <!-- 2小时间隔 -->
                  <li>48小时</li> <!-- 4小时间隔 -->
                  <li>72小时</li> <!-- 6小时间隔 -->
                  <li>96小时</li> <!-- 8小时间隔 -->
                </ul>
              </div>
          </div>
      </div>
      <div>
          <div class="monitor-detail-title title-track">跟踪记录</div>
          <div class="monitor-order-detail">
            <div class="map" id="allmap"></div>
          </div>
      </div>
    </div>
  </div>
  <!-- end 内容-->

  <footer class="footer">
    <p>
      Copyright © 2015-2017
      <a href="http://www.miitbeian.gov.cn/state/outPortal/loginPortal.action" target="_blank">粤ICP备16033858-1</a> 深圳传世般若科技有限公司
    </p>
  </footer>
  <script type="text/javascript" src="lib/jquery.min.js"></script>
  <script type="text/javascript" src="lib/underscore-min.js"></script>
  <script type="text/javascript" src="lib/layui/lay/dest/layui.all.js"></script>
  <script type="text/javascript" src="lib/bootstrap.min.js"></script>
  <script type="text/javascript" src="lib/bootstrap-table.js"></script>
  <script type="text/javascript" src="lib/jquery.validate.min.js"></script>
  <script type="text/javascript" src="lib/city-picker.js"></script>
  <script type="text/javascript" src="lib/bootstrap-datetimepicker.min.js"></script>
  <script type="text/javascript" src="lib/jquery.slimscroll.js"></script>
  <script type="text/javascript" src="lib/echarts-all.js"></script>
  <script type="text/javascript" src="lib/flot/jquery.flot.js"></script>
  <script type="text/javascript" src="lib/zUI.js"></script>
  <!--新导航-->
  <!-- <script type="text/javascript" src="lib/snap.svg-min.js"></script>
  <script type="text/javascript" src="lib/modernizr.custom.js"></script> -->
  <script type="text/javascript" src="js/header_sfy.js"></script>
  <!--end新导航-->
  <script type="text/javascript" src="js/app.js"></script>
  <script type="text/javascript" src="js/validate-demo.js"></script>
  <script type="text/javascript" src="js/main.js"></script>
  <script type="text/javascript" src="js/cy.js"></script>
  <script src="js/echarts.js"></script>
  <!-- <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=ZUONbpqGBsYGXNIYHicvbAbM"></script> -->
  <!-- <script type="text/javascript" src="http://gallery.echartsjs.com/dep/echarts/latest/extension/bmap.min.js"></script> -->
  
  <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=6d88e38ab7f507ee19cec46443691d95"></script>

  <script src="js/monitor.js"></script>
  <script type="text/javascript">
    // 百度地图API功能
    var map = new BMap.Map("musMap"); // 创建Map实例

    //添加缩放控件
    map.addControl(top_left_control);
    map.addControl(top_left_navigation);
    /*map.addControl(top_right_navigation);  */
    var start = $('#start').html();
    var end = $('#end').html();
    var routePolicy = [BMAP_DRIVING_POLICY_LEAST_TIME, BMAP_DRIVING_POLICY_LEAST_DISTANCE, BMAP_DRIVING_POLICY_AVOID_HIGHWAYS];

    map.clearOverlays();

    search(start, end, 0);

    function search(start, end, route) {
        var driving = new BMap.DrivingRoute(map, {
            renderOptions: {
                map: map,
                autoViewport: true
            },
            policy: route
        });
        driving.search(start, end);
    }

    var top_left_control = new BMap.ScaleControl({
        anchor: BMAP_ANCHOR_TOP_LEFT
    }); // 左上角，添加比例尺
    var top_left_navigation = new BMap.NavigationControl(); //左上角，添加默认缩放平移控件

    marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画
    //			map.centerAndZoom(point, 19); // 初始化地图,设置中心点坐标和地图级别
    //			map.addOverlay(marker); // 将标注添加到地图中
    map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
    map.addControl(new BMap.MapTypeControl()); //添加地图类型控件
    map.setCurrentCity("武汉"); // 设置地图显示的城市 此项是必须设置的
</script>
</body>

</html>